<template>
  <div class="anniversary">
    <div class="bannerWrap">
      <!-- 轮播图 -->
      <div class="banner">
        <div class="flexc">
          <img src="@/assets/img/activity/halloween/bannerTitle.png" alt="" style="width:600px"
            v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
          <img v-else style="width:670px" src="@/assets/img/activity/halloween/bannerTitleen.png" alt="" >
        </div>
      </div>
    </div>
    <!-- banner desc 说明-->
    <div class="bannerDesc" id="video">
        <p>{{$t('halloween.banner1')}}{{$t('halloween.banner2')}}</p>
        <p>{{$t('halloween.banner3')}}{{$t('halloween.banner4')}}</p>
        <p>{{$t('halloween.banner5')}}{{$t('halloween.banner6')}}</p>
    </div>
    <!-- 视频 -->
    <div class="video">
      <img class="videologo1" src="@/assets/img/activity/halloween/videologo1.png" alt="">
      <img class="videologo2" src="@/assets/img/activity/halloween/videologo2.png" alt="">
      <span class="video-btn" @click="handlePlayVideo"></span>
      <a :href="videoUrl" class="hidden" target="_blank" ref="videoHref"></a>
    </div>
    <div class="otc-btn" @click="$router.push({name:'otc'})">
      {{$t('halloween.otc')}}
    </div>

    <!-- 周年庆惊喜转不停-->
    <div class="luckDraw" id="draw">
        <div class="luckDrawTitle">
          <img style="margin: 60px 0 30px; width100%"
          v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'"
          src="@/assets/img/activity/halloween/turnTitle.png" alt="">
          <img class="luckDrawImg" style="margin: 60px 0 60px; width100%" v-else src="@/assets/img/activity/halloween/turnTitleen.png?v=1.0" alt="">
        </div>
      <div class="activeTime">
        {{$t("halloween.activeTime")}}
      </div>
      <div class="prizeList"
        v-show="isStart !== 0"
        ref="noticeHover"
        style="position: relative; height: 35px; overflow: hidden; width: 600px;"
        :style="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW' ? 'padding: 0 0 0 140px': ''">

        <div class="noticeScroll" ref="noticeScroll">
          <div :key="index" v-for="(item, index) in lastDrawLogList" class="noticeItem">
            <!-- 恭喜{{item.account }}抽得{{ item.reward }}的奖励！！！  -->
            <i class="iconfont icon-xiaoxitishi "></i>{{ $t('anniversary.congra', {account: item.account, reward: item.reward}) }}
          </div>
        </div>
      </div>
      <!-- 抽奖 -->
      <div class="luckDrawCont turntable-box">
        <div class="btn" @click="handleTurntable">
          <template v-if="isStart === 1">
            <span>{{ $t('anniversary.joinNow1') }}</span>
            <span>{{ $t('anniversary.joinNow2') }}</span>
          </template>
          <template v-else-if="isStart === 2">
            <span>{{ $t('anniversary.closed') }}</span>
          </template>
          <template v-else>
            <span>{{ $t('anniversary.commingSoon1') }}</span>
            <span>{{ $t('anniversary.commingSoon2') }}</span>
          </template>
        </div>
        <div ref="turntable" v-if="turntableShow">
        </div>
      </div>
      <p v-if="$store.state.app.scatter
        && $store.state.app.scatter.identity
        && remainDrawCount !== null
        && $store.state.app.scatter.chain === 'eos'
        && isStart === 1"
        class="center"
        style="margin-top: 30px; color: #FFC78A;">
        {{ $t('anniversary.remaining', {time: remainDrawCount}) }}
      </p>
      <div class="luckDrawBtn flex">
        <!-- 我的抽奖记录 -->
        <span @click="handleLoginAuth()">{{ $t('anniversary.myPrize') }}</span>
        <!-- 我要领奖 -->
        <!-- <span @click="handleGetReward">{{ $t('anniversary.claimMyReward') }}</span> -->
      </div>
      <div class="luckDrawRules">
        <img class="tips1" src="@/assets/img/activity/halloween/tips1.png" alt="">
        <img  class="tips2" src="@/assets/img/activity/halloween/tips2.png" alt="">
        <div class="tipsTitle">{{$t('halloween.tipTitle')}}</div>
        <p class="fontBold">{{$t('halloween.tipName')}}</p>
        <p class="pdl">{{$t('halloween.tip1')}}</p>
        <p class="pdl mg5">{{$t('halloween.tip2')}}</p>
        <p class="fontBold">{{$t('halloween.tipName2')}}</p>
        <p class="pdl">{{$t('halloween.tip3')}}</p>
        <p class="pdl">{{$t('halloween.tip4')}}</p>
        <p class="pdl">{{$t('halloween.tip5')}}</p>
        <p class="pdl">{{$t('halloween.tip6')}}</p>
        <p class="pdl mg5">{{$t('halloween.tip7')}}</p>
        <p class="fontBold">{{$t('halloween.tipName3')}}</p>
        <p class="pdl">{{$t('halloween.tip8')}}</p>
        <p class="pdl mg5">{{$t('halloween.tip9')}}</p>
        <p class="fontBold">{{$t('halloween.tipName4')}}</p>
        <p class="pdl">{{$t('halloween.tip10')}}</p>
        <p class="pdl mg5">{{$t('halloween.tip11')}}</p>
        <p class="fontBold">{{$t('halloween.tipName5')}}</p>
        <p class="pdl">{{$t('halloween.tip12')}}</p>
        <p class="pdl mb40">{{$t('halloween.tip13')}}</p>
        <div class="tipsTitle">{{$t('halloween.tipTitle2')}}</div>
        <p class="pdl">{{$t('halloween.tip14')}}</p>
        <p class="pdl">{{$t('halloween.tip15')}}</p>
        <p class="pdl">{{$t('halloween.tip16')}}</p>
        <p class="pdl">{{$t('halloween.tip17')}}</p>
        <p class="pdl">{{$t('halloween.tip18')}}</p>
        <p class="pdl">{{$t('halloween.tip19')}}</p>
        <p class="pdl" style="margin-left:15px">{{$t('halloween.tip20')}}</p>
        <p class="pdl" style="margin-left:15px">{{$t('halloween.tip21')}}</p>
        <p class="pdl" style="margin-left:15px">{{$t('halloween.tip22')}}</p>
        <p class="pdl" style="margin-left:15px; color: #F4C96C;">{{$t('halloween.tip23')}}</p>
        <p class="center" style="margin-top: 30px;">* {{ $t('anniversary.drawFrequencyTip6') }}</p>
      </div>
      <div class="waterfallDiv" id="img">
        <img class="waterfalLogo1" src="@/assets/img/activity/halloween/waterfallTitle.png" alt="">
        <img class="waterfalLogo2" src="@/assets/img/activity/halloween/videologo2.png" alt="">
        <div class="waterfallTitle">
          <p>{{$t('halloween.worksDisplay')}}</p>
          <p class="mt5 mb5">{{$t('halloween.worksDispla2')}}
            <a href="https://twitter.com/NewdexOfficial" target="_blanck" class="colorThis">
              {{$t('halloween.worksDispla21')}}
            </a>
          </p>
        </div>
        <vue-waterfall-easy ref="waterfall" :imgsArr="imgsArr" :imgWidth='imgWidth'
        :maxCols="maxCols" @click="handleWaterfallFn" @scrollReachBottom="handleGetWaterfall">
          <div class="img-info" slot-scope="props"><p class="some-info">{{props.value.author}}</p>
          </div>
          <template #waterfall-over>
            <div>
              {{$t('halloween.worksDispla3')}}
            </div>
          </template>
        </vue-waterfall-easy>
      </div>
    </div>
    <!-- 获奖记录 -->
    <div class="awardRecord layer" v-if="layerHide">
      <div class="layer-cont" style="border-radius: 10px;">
        <div class="closeBtn iconfont el-icon-close" @click="handleCloseLayer"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.myPrize') }}</p>
        <template v-if="drawLogList.length > 0">
          <div class="tableList">
            <div class="tablehead flex">
              <div>{{ $t('anniversary.Prize') }}</div>
              <div>{{ $t('anniversary.timePrize') }}</div>
            </div>
            <div class="wrapTable">
              <div class="tableBody flex" :key="index" v-for="(item, index) in drawLogList">
                <div>{{ item.reward }}</div>
                <div>{{ item.createTs | dateFormatBIH }}</div>
              </div>
            </div>
          </div>
          <div class="wantBtn" @click="handleShowOrder">{{ $t('anniversary.exchangeThePrize') }}</div>
        </template>
        <template v-else>
          <div class="flexc" style="padding-top: 160px; font-size: 20px;">{{ $t('anniversary.noWinningRecord') }}</div>
        </template>
      </div>
    </div>
    <!-- 兑奖页面 -->
    <div class="submitOrderRecord layer" v-if="layerOrderHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="handleCloseLayer"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.exchangeThePrize') }}</p>
        <div class="word center">
          <p style="margin-bottom: 30px;">
            {{ $t('anniversary.asPossible') }}
          </p>
          <p>{{ $t('anniversary.asPossible1') }}</p>
        </div>
        <div class="orderBtn flexb">
          <span @click="handleCloseLayer">{{ $t('anniversary.cancelPrize') }}</span>
          <a href="https://newdex.zendesk.com/hc/zh-cn/requests/new" target="_blank"
          v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
            {{ $t('anniversary.submitRequest') }}
          </a>
          <a href="https://newdex.zendesk.com/hc/en-us/requests/new" target="_blank" v-else>
            {{ $t('anniversary.submitRequest') }}
          </a>
        </div>
      </div>
    </div>
    <!-- 抽奖结束弹窗 -->
    <div class="endDialog layer" v-if="layerEndHide" :class="{'getReward': ownInfo && ownInfo.awardLevel !== 12}">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close"  @click="layerEndHide = false;"></div>
        <img :src="imgUrl" alt="">
        <h3 v-if="ownInfo.awardLevel !== 12">{{ $t('anniversary.congratulations', {reward: ownInfo.reward}) }}</h3>
        <h3 v-else style="color: #fff;">
          <p >{{ $t('anniversary.unfortunately') }}</p>
          <p style="margin-top:15px;font-size:18px;font-weight:normal;">{{ $t('anniversary.unfortunatelyTip') }}</p>
        </h3>
        <h4 v-if="ownInfo.awardLevel === 1" style="color: #FFE4A1;">{{ $t('anniversary.asPossible1') }}</h4>
        <div class="endBtn" @click="layerEndHide = false;">{{ $t('anniversary.keepDrawing') }}</div>
      </div>
    </div>
    <!-- 中奖次数用完 -->
    <div class="submitOrderRecord layer noneDialog" v-if="layerNoneHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="layerNoneHide=false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('anniversary.drawTimes') }}</p>
          <div class="endBtn" @click="layerNoneHide = false;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 抽奖未开始 -->
    <div class="submitOrderRecord layer noneDialog" v-if="notstartedHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="notstartedHide=false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('anniversary.actiTime2') }}</p>
          <div class="endBtn" @click="notstartedHide = false;" style="margin-top: 40px;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 抽奖已结束 -->
    <div class="submitOrderRecord layer noneDialog" v-if="startOver">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="startOver = false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p class="center">{{ $t('anniversary.activeOver') }}</p>
          <div class="endBtn" @click="startOver = false;" style="margin-top: 40px;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 视频播放组件 -->
    <my-video
      :video-config="videoConfig"
      @listenVideoLevel="handleVideoLevel"/>
    <photo-album  v-if="isGallary" :imgsArr="imgsArr" :gallaryIndex="gallaryIndex" @listenClose="handleClose"></photo-album>
    <!-- 锚点 -->
    <transition name="el-fade-in-linear">
      <div class="anchorPoint" v-show="btnFlag">
        <div>
          <a href="#video">{{ $t('halloween.experienceOTC') }}</a>
        </div>
        <div>
          <a href="#draw">{{ $t('halloween.luckyDraw') }}</a>
        </div>
        <div>
          <a href="#img">
            {{ $t('halloween.workDisplay') }}
          </a>
        </div>
        <div class="flexc" @click="handleBackTop">
          <i class="iconfont el-icon-arrow-up"></i>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import LotteryTurntable from 'lottery-turntable';
import vueWaterfallEasy from 'vue-waterfall-easy'
import MyVideo from '@/components/Video';
import { authorized } from '@/utils/validate';
import PhotoAlbum from './Gallary'

export default {
  name: 'halloween', // 周年活动
  data() {
    return {
      imgsArr: [],
      gallaryIndex: 1,
      isGallary: false,
      currPage: 1,
      maxCols: 4,
      imgWidth: 290,
      showGallery: false,
      videoUrl: '',
      videoConfig: {
        open: false,
        en: 'https://www.youtube.com/embed/LbBvphEkYgw', // 国外访问视频地址
        zh: 'https://cdn.340wan.com/newdex-otc.mp4' // 国内
      },
      noticeScrollTimer: null,
      drawLogList: [], // 个人获奖记录
      remainDrawCount: null, // 抽奖次数
      lastDrawLogList: [], // 最近的中奖记录
      active: 0, // hover显示二维码
      layerHide: false, // 个人获奖记录弹窗
      codeHide: false, // 海报弹窗
      layerOrderHide: false, // 提交工单
      layerEndHide: false, // 结果页
      layerNoneHide: false, // 没抽奖次数
      notstartedHide: false, // 抽奖未开始
      startOver: false, // 抽奖已结束
      ownInfo: { // 抽奖结果
        awardLevel: 0,
        reward: '',
      },
      imgUrl: '',
      isClick: true, // 防止重复点击
      posterData: { // 海报
        date: '2018.08.01',
        tradeNum: 3746,
        coinNum: 76,
        tradeAmount: 12369
      },
      posterUrl: '', // 海报图片链接
      turntable: '',
      turntableShow: true, // 抽奖转盘显示
      isStart: 0, // 是否开始 0-未开始 1-进行中 2-已结束
      posterHide: true, // 隐藏海报
      loading: true, // loading
      values: [{
        id: 2,
        name: 'KROWN',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/krown.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 3,
        name: 'SAND',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/sand.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 4,
        name: 'SOV',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/sov.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 5,
        name: 'VTX',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/vtx.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 6,
        name: 'XDAP',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/xdap.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 7,
        name: 'SPIN',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/spin.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 8,
        name: 'KEY',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/key.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 9,
        name: 'RUSH',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/rush.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 12,
        name: this.$t('anniversary.thanks'),
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/think.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 1,
        name: 'iPhone11',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/iphone.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 10,
        name: 'DEFI',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/defi.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }, {
        id: 11,
        name: 'BID',
        img: {
          src: 'https://ndx.340wan.com/static/activity/halloween/bid.png?v=1.1',
          width: 80,
          height: 80,
        },
        bg: '#fff',
        fill: '#333',
      }],
      scrollTop: 0, // 滚动距离
      btnFlag: false, // 返回顶部显示值
    }
  },
  components: {
    MyVideo,
    PhotoAlbum,
    vueWaterfallEasy
  },
  props: {},
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.remainDrawCount = null;
      },
      deep: true,
    },
    '$store.state.app.language': function change() {
      this.turntableShow = false;
      setTimeout(() => {
        this.turntableShow = true;
        this.$nextTick(() => {
          this.initTurntable();
        });
      }, 1000);
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    const token = localStorage.getItem('Frontend-Token');
    const scatter = this.$store.state.app.scatter;
    if (token && scatter && scatter.identity) {
      this.handleDrawInfo();
    }
    this.handleGetWaterfall()
    // 获取最近中奖记录
    this.handleDrawList();
    this.handleNoticeScroll();
    this.initTurntable();
    window.addEventListener('scroll', this.scrollToTop);
  },
  beforeDestroy() {
    if (this.noticeScrollTimer) {
      clearInterval(this.noticeScrollTimer)
    }
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    handleWaterfallFn(event, { index, value }) {
    // 阻止a标签跳转
      event.preventDefault()
      // 只有当点击到图片时才进行操作
      // console.log(event.target.tagName);
      if (event.target.tagName.toLowerCase() === 'img') {
        // eslint-disable-next-line no-console
        console.log('img clicked', index, value)
        this.isGallary = true
        this.gallaryIndex = Number(index)
      }
    },
    handleGetWaterfall() {
      const params = {
        currPage: this.currPage,
        pageSize: 10
      }
      this.$http.post('halloween/getHalloweenPic', params).then((res) => {
        if (res.code !== 0) {
          return
        }
        if (!res.page.records.length) {
          this.$refs.waterfall.waterfallOver()
          return
        }
        this.imgsArr = this.imgsArr.concat(res.page.records)
        this.currPage += 1
      })
    },
    // 获取抽奖信息
    handleDrawInfo() {
      this.$http.post('/halloween/getAccountDrawInfo').then((res) => {
        // if (res.code === 1028) {
        //   this.$message.error(this.$t('anniversary.plstoEos'));
        //   return;
        // }
        if (res.code === 401) {
          authorized(this, (code, result) => {
            if (code === 'error') { // 授权错误
              console.log(result); // eslint-disable-line
              return;
            }
            this.handleDrawInfo();
          });
          return;
        }
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.remainDrawCount = res.remainDrawCount;
        this.drawLogList = res.drawLogList;
      });
    },
    // 初始化转盘
    initTurntable() {
      this.turntable = new LotteryTurntable({
        type: 'transition', // 转盘转动类型
        size: 615, // 转盘尺寸，默认为320
        textSpace: 20, // 奖品名称距离转盘边距，默认为15
        imgSpace: 90, // 奖品图片距离转盘边距，默认为50
        speed: 4, // transition动画持续多长时间，秒为单位
        ring: 8, // 转动多少圈后到达终点，越大转速越快
        values: this.values,
        container: this.$refs.turntable
      });
    },
    // 判断有无登录和授权
    handleLoginAuth() {
      if (!this.isClick) return;
      const scatter = this.$store.state.app.scatter;
      if (scatter && !scatter.identity) {
        this.handleWalletPermission();
        return;
      }
      // 判断所属链是否为eos
      const accountInfo = this.$store.state.app.accountInfo;
      if (accountInfo && accountInfo.chain !== 'eos') {
        this.$message.warning(this.$t('anniversary.plstoEos'));
        return;
      }
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          this.handleDrawInfo();
          this.layerHide = true; // 个人获奖记录弹窗
        });
        return;
      }
      this.handleDrawInfo();
      this.layerHide = true; // 个人获奖记录弹窗
    },
    // 抽奖
    handleTurntable() {
      if (this.isStart === 0) {
        this.notstartedHide = true;
        return;
      }
      if (this.isStart === 2) {
        this.startOver = true;
        return;
      }
      const scatter = this.$store.state.app.scatter;
      if (scatter && !scatter.identity) {
        this.handleWalletPermission();
        return;
      }
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          this.handleDrawInfo();
        });
        return;
      }
      if (this.remainDrawCount === 0) {
        this.layerNoneHide = true;
        return;
      }
      this.handleStartDraw(); // 开始抽奖
    },
    // 开始抽奖
    handleStartDraw() {
      // 防止重复点击
      if (this.isClick) {
        this.isClick = false;
        setTimeout(() => {
          this.isClick = true;
        }, 4000);
      } else {
        return;
      }
      this.$http.post('halloween/startDraw').then((res) => {
        if (res.code === 1028) {
          this.$message.error(this.$t('anniversary.plstoEos'));
          return;
        }
        // if (res.code === 1029) {
        //   this.$message.error(this.$t('anniversary.plstoEos'));
        //   return;
        // }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.remainDrawCount = res.remainDrawCount;
        const awardLevel = res.awardLevel;
        this.turntable.goto(awardLevel, () => {
          this.layerEndHide = true;
          this.ownInfo = {
            awardLevel: res.awardLevel,
            reward: res.reward
          };
          // https://ndx.340wan.com
          this.imgUrl = this.values.find(v => v.id === res.awardLevel).img.src;
        });
        setTimeout(() => {
          this.handleDrawList();
        }, 2000);
      });
    },
    // 获取获奖列表
    handleDrawList() {
      this.$http.post('/halloween/getLastDrawList').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.lastDrawLogList = res.lastDrawLogList;
        this.isStart = res.isStart;
        setTimeout(() => {
          this.handleDrawList();
        }, 120000);
      });
    },
    // notice 滚动
    handleNoticeScroll() {
      let noticeScrollWay = -35;
      this.noticeScrollTimer = setInterval(() => {
        if (this.$refs.noticeScroll) {
          this.$refs.noticeScroll.style = `transform: translateY(${noticeScrollWay}px) scale(1);`;
        }
        noticeScrollWay -= 35;
        const num = this.lastDrawLogList.length;
        if (noticeScrollWay < -35 * num) {
          noticeScrollWay = -35;
        }
      }, 3000)
    },
    // 跳转到寻宝页面
    handleToHunt() {
      this.$router.push({
        name: 'treasure'
      })
    },
    // 视频播放
    handlePlayVideo() {
      const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      this.videoUrl = this.videoConfig.en;
      const lang = this.$store.state.app.language;
      if (lang === 'zh-CN' || lang === 'zh-TW') {
        this.videoUrl = this.videoConfig.zh;
      }
      if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1) {
        setTimeout(() => {
          this.$refs.videoHref.click();
        }, 500)
        return;
      }
      this.videoConfig.open = true;
    },
    // 关闭视频通知
    handleVideoLevel(val) {
      if (val === 'close') {
        this.videoConfig.open = false;
      }
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      sessionStorage.setItem('checkWalletByChain', 'EOS');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    showActive(index) {
      this.active = index;
    },
    // 链节点
    handleChainNode() {
      this.$refs.chainNode.click();
    },
    handleGetReward() {
      if (!this.isClick) return;
      this.layerOrderHide = true;
    },
    // 关闭抽奖记录弹窗
    handleCloseLayer() {
      this.layerHide = false;
      this.layerOrderHide = false;
    },
    // 关闭轮播图弹窗
    handleClose() {
      this.isGallary = false;
    },
    // 我要兑奖
    handleShowOrder() {
      this.layerHide = false;
      this.layerOrderHide = true;
    },
    // 监听滚动事件
    scrollToTop() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollTop = scrollTop
      if (this.scrollTop > 540) {
        this.btnFlag = true
      } else {
        this.btnFlag = false
      }
    },
    // 回到顶部
    handleBackTop() {
      const timer = setInterval(() => {
        const ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = this.scrollTop + ispeed; // eslint-disable-line
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 10)
    }
  },
}
</script>
<style lang="scss" scoped>
$-back: #303287;
.fontBold {
  font-weight: bold;
  margin-bottom: 6px;
  color: #F4C96C;

}

.anchorPoint {
  transition: all 1s;
  position: fixed;
  top: 300px;
  left: 50%;
  margin-left: 640px;
  background: #4C4595;
  padding: 10px 20px;
  z-index: 19;
  & > div {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    line-height: 30px;
    cursor: pointer;

    &:last-child {
      border: 0;
    }

    i {
      font-size: 28px;
    }

    a:hover {
      color: #fff;
    }
  }
}

.anniversary {
  margin-bottom: -4px;
  background: #09002c;
  color: #fff;
  padding-bottom: 40px;

  .cursorPointer {
    cursor: pointer;
  }

  .bannerWrap {
    height: 540px;
    background: url('../../../assets/img/activity/halloween/banner.png') center center no-repeat;
    background-size: cover;
    // margin-bottom: 70px;

    .banner {
      width: 1060px;
      margin: 0 auto 0;
      padding-top: 80px;
    }

    img {
      display: block;
      width: 300px;
    }
  }
  .bannerDesc{
    padding-top: 50px;
    height: 180px;
    line-height: 2;
    width: 100%;
    color: #F7CB80;
    text-align: center;
    background-color: #07022A;
  }


  .video {
    width: 913px;
    height: 500px;
    background: url('../../../assets/img/activity/halloween/videobg.png');
    background-color: #3B3588;
    position: relative;
    margin: 150px auto 30px;
    background-size: 100% 100%;
    .videologo1{

        transform: translateY(-30%);
        position: absolute;
        top: 0;
        left: 0;
      }
      .videologo2{
        position: absolute;
        bottom: -30px;
        right: 0;
      }
    .video-btn {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      background: url('../../../assets/img/videoplay.png');
      background-size: cover;
      cursor: pointer;
    }

  }
  .otc-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    // width: 25000px;
    height: 40px;
    padding: 0 30px;
    font-size: 20px;
    margin: 0 auto 10px;
    border-radius: 7px;
    color: #521A08;
    background-image: linear-gradient(to right, #E9943F, #F7DC86);
    cursor: pointer;
  }

  .title {
    text-align: center;
    font-size: 40px;
    // margin: 120px 0 80px 0;
    color: #FFC78A;
  }

  .luckDraw {
    .luckDrawTitle{
      display: flex;
      justify-content: center;

      img {
        display: block;
        height: 300px;
        width: 450px;

      }
      .luckDrawImg{
        width: 500px;
        height: 100px;
      }
    }
    .activeTime{
      color: #FFE239;
      font-size: 20px;
      text-align: center;
      margin-bottom: 20px;
    }
    .prizeList {
      margin: 0 auto 40px;
      line-height: 35px;
      color: #FFE239;
      // border: 1px solid #fff;
      border-radius: 20px;
      padding: 0 40px;
      // background-image: linear-gradient(to right, #5B86F2 0%, #9A94D9 100%);
      .icon-xiaoxitishi{
        margin: 0 10px 0 0;
        font-size: 24px;
      }
      .noticeScroll {
        transition: transform .4s ease-in-out;
        position: absolute;
        width: 550px;
        line-height: 35px;
        padding-left: 30px;
        .noticeItem{
          display: flex;
          align-items: center;
          font-size: 16px;
          line-height: 35px;

        }
      }
    }

    .luckDrawCont {
      position: relative;
      margin: 20px auto 20px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: #fff;
    }

    .turntable-box {
      width: 680px;
      height: 680px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url('../../../assets/img/activity/halloween/turnbg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      font-size: 14px;
      // font-weight: bold;
      margin: 0 auto;

      .btn {
        width: 270px;
        height: 270px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translate(-50%,-50%);
        background: url('../../../assets/img/activity/halloween/turnbtn.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 20px;
        cursor: pointer;
        color: #fff;

        p {
          margin: 5px 0 20px 0;
          font-weight: normal;
          font-size: 14px;
          color: #721041;
        }
      }
    }

    .luckDrawBtn {
      position: relative;
      justify-content: center;
      margin: 30px 0 140px 0;

      span {
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        min-width: 200px;
        line-height: 40px;
        padding: 0 10px;
        text-align: center;
        // background-image: linear-gradient(to bottom, #FFE275, #FED037);
        background-color: #3F3984;
        border-radius: 5px;
        cursor: pointer;
        color: #fff;
      }

      // span:nth-child(1) {
      //   margin-right: 40px;
      // }
    }

    .luckDrawRules {
      padding: 60px;
      width: 1260px;
      margin: 0 auto 0;
      background: #4C4595;
      position: relative;
      background-image: linear-gradient(to bottom, #4C4595, #231D5A);
      .tips1{
        width: 1260px;
        height: 190px;
        transform: translateY(-98.5%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }
      .tips2{
        width: 1260px;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .tipsTitle{
        display: flex;
        justify-content: center;
        align-items: center;
        width:fit-content;
        // width: 25000px;
        height: 40px;
        padding: 0 15px;
        font-size: 20px;
        margin-bottom: 10px;
        border-radius: 7px;
        color: #521A08;
        background-image: linear-gradient(to right, #E9943F, #F7DC86);
      }

      .pdl {
        padding-left: 1vh;
        &.mg5{
          margin-bottom: 5px;
        }
      }

      p {
        line-height: 26px;
      }

      .mb40 {
        margin-bottom: 40px;
      }
    }
    .waterfallDiv{
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 1260px;
      height: 1000px;
      margin: 40px auto;
      background: #4C4595;
      position: relative;
      color: #AAA2F8;
      background-image: linear-gradient(to bottom, #4C4595, #231D5A);
      padding-top: 200px;
      .waterfalLogo1{
        position: absolute;
        top: 25px;
        left: 10px;
      }
      .waterfalLogo2{
        position: absolute;
        top: 0;
        right: 10px;
      }
      .waterfallTitle{
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 200px;
        width: 100%;
        vertical-align: center;
        p:first-child{
          color: #F7CB80;
          font-size: 30px;
        }
      }
      /deep/ .vue-waterfall-easy-scroll{
        &::-webkit-scrollbar {
          width: 5px;
          height: 5px;
          background-color: #303287;
          border-radius: 15px;
        }
        /*定义滚动条的轨道，内阴影及圆角*/
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 0 #303287;
          border-radius: 0;
          background-color: #303287;
        }
        /*定义滑块，内阴影及圆角*/
        &::-webkit-scrollbar-thumb {
          /*width: 10px;*/
          /*height: 25px;*/
          border-radius: 1px;
          -webkit-box-shadow: inset 0 0 0 #303287;
          background-color: rgba(193, 193, 193, 0.7);
        }
      }
      /deep/ .some-info{
        display: flex;
        // justify-content: center;
        align-items: center;
        height: 40px;
        color: #333;
        padding-left: 20px;
        background-color: #fff;
      }
  }
  }

  .layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;

    .layer-cont {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 450px;
      min-height: 500px;
      background: $-back;
      transform: translate(-50%, -50%);
      padding: 30px 30px 40px 30px;

      .awardRecordCapition {
        color: #fff;
        font-size: 24px;
        margin-bottom: 20px;
      }

      .closeBtn {
        position: absolute;
        top: -0;
        right: -40px;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
      }

      .wantBtn {
        text-align: center;
        width: 215px;
        line-height: 54px;
        margin: 50px auto 0;
        border-radius: 5px;
        cursor: pointer;
        background-image: linear-gradient(to bottom, #FFE275, #FED037);
        color: #66360E;
      }

      .tableList {
        border-radius: 5px;
        text-align: center;

        .tablehead {
          background: #3C3D99;
          color: #A6A7FF;

          div {
            line-height: 55px;
          }

          div:nth-child(1) {
            flex: 2;
          }

          div:nth-child(2) {
            flex: 3;
          }
        }

        .wrapTable {
          height: 275px;
          overflow-y: scroll;
          background: #363791;
          &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: #303287;
            border-radius: 15px;
          }
          /*定义滚动条的轨道，内阴影及圆角*/
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 0 #303287;
            border-radius: 0;
            background-color: #303287;
          }
          /*定义滑块，内阴影及圆角*/
          &::-webkit-scrollbar-thumb {
            /*width: 10px;*/
            /*height: 25px;*/
            border-radius: 1px;
            -webkit-box-shadow: inset 0 0 0 #303287;
            background-color: rgba(193, 193, 193, 0.7);
          }
        }

        .tableBody {
          color:#fff;

          div {
            line-height: 55px;
          }

          div:nth-child(1) {
            flex: 2;
          }

          div:nth-child(2) {
            flex: 3;
          }
        }
      }
    }
  }

  .submitOrderRecord {
    font-size: 20px;

    .endBtn {
      display: block;
      width: 187px;
      line-height: 55px;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      background-image: linear-gradient(0deg, #E5AE65 0%, #FFEA7A 100%);
      color: #8B572A;
      margin: 30px auto 0;
    }
    .codeCanvas {
      margin-top: 40px;
    }

    .layer-cont {
      min-height: 400px;

      .orderBtn {
        margin-top: 40px;

        span, a {
          // border: 1px solid #FFFFFF;
          display: inline-block;
          width: 187px;
          line-height: 55px;
          text-align: center;
          border-radius: 7px;
          cursor: pointer;
          background-image: linear-gradient(to bottom, #FFE275, #FED037);
          color: #66360E;
        }

        // a {
        //   background-image: linear-gradient(to bottom, #FFE275, #FED037);
        //   color: #66360E;
        // }
      }
    }
  }

  .noneDialog {
    .layer-cont {
      min-height: 300px;

      .word {
        margin-top: 30px;
        .center{
          text-align: center;
        }
      }
    }
  }

  .endDialog {
    text-align: center;

    .layer-cont {
      min-height: 450px;
      // background: url('../../../assets/img/activity/anniversary/back1.png') no-repeat;
      background-color: #494294;
      background-size: 100% 100%;
      padding-top: 60px;

      img {
        display: block;
        width: 144px;
        height: 144px;
        margin: 0 auto;
      }

      h2 {
        font-size: 34px;
        color: #FFC78A;
      }

      h3 {
        margin: 25px 0 25px;
        font-size: 22px;
        color: #FFC78A;
      }

      h4 {
        color: #F5A623;
      }

      .endBtn {
        background-image: linear-gradient(0deg, #E5AE65 0%, #FFEA7A 100%);
        border-radius: 7.5px;
        font-size: 18px;
        color: #8B572A;
        line-height: 50px;
        width: 180px;
        text-align: center;
        margin: 40px auto 0;
        cursor: pointer;
      }
    }
  }

  .endDialog.getReward {
    .layer-cont {
      // background: url('../../../assets/img/activity/anniversary/back1.png') no-repeat;
      background-color: #494294;
      background-size: 100% 100%;
    }
  }
}

/deep/ .vue-waterfall-easy-container {
  .over {
    display: none;
  }
}
</style>

